
<%--
  Created by IntelliJ IDEA.
  User: 吴某
  Date: 2024/7/1
  Time: 16:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
</head>
<style>
   body{
       background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
   }
   table {
       width: 80%; /* 设置表格宽度为页面宽度的80% */
       margin: auto; /* 使表格居中显示 */
       border-collapse: collapse; /* 合并边框 */
   }
   th, td {
       border: none; /* 设置单元格边框 */
       padding: 8px; /* 设置单元格内边距 */
       text-align: left; /* 设置文本左对齐 */
   }
   th {
       background-color: #f2f2f2; /* 设置表头背景颜色 */
   }
   .product-name {
       width: 60%; /* 设置商品名称列宽度为60% */
   }
   button{
       background-color: red;
   }
#bt{
    margin-left: 87%;

}
#back{
}

</style>
<body>

<h1>购物车</h1>
<table border="1">
    <tr>
        <th>序号</th>
        <th class="product-name">商品名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
    </tr>


    <c:forEach var="product" items="${requestScope.cart}">
        <tr>
            <td>${product.id}</td>
            <td>${product.title}</td>
            <td>${product.price}</td>
            <td>${product.count}</td>
            <td></td>
                <td><button><a href="/deletecart?id=${product.id}">删除</a></button></td>
        </tr>
    </c:forEach>

</table>

<button id="bt"><h2>结账</h2></button>
<h2><a href="buyer.jsp" id="back">返回</a></h2>
</body>
</html>

